<template>
  <el-dialog title='导入数据' v-model="isShowDialog" width="40%">
    <!-- 上传部分 -->
    <el-upload
      class="upload-demo"
      ref="refUpload"
      drag
      :limit="limits"
      :action="action"
      :auto-upload="false"
      :accept="accept"
      :on-success="handleSuccess"
      :on-error="handleError"
      :on-exceed="handleExceed"
      :before-upload="beforeUpload"
    >
      <el-icon class="el-icon-upload"><upload-filled class="icon-upload" /></el-icon>
      <div class="el-upload__text">
        拖拽文件到这里 或<em>点击上传</em>
      </div>
      <template #tip>
        <div class="el-upload__tip">
          <el-button size="small" type="success" @click="downloadDemo">
            <el-icon><elementDownload/></el-icon> 
            <span> 下载模板</span>
          </el-button>
          请按照模板格式进行上传，仅支持<span>{{accept}}</span>文件
        </div>
      </template>
    </el-upload>
    <!-- 底部确认框 -->
    <template #footer >
      <div class="dialog-footer">
        <el-button @click="isShowDialog = false">取 消</el-button>
        <el-button type="primary" :loading="uploadBtnLoading" @click="uploadFile()">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { reactive, toRefs, ref } from "vue";
import { ElMessage } from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue'
export default ({
  name: 'BtnImport',
  components: {
    UploadFilled,
  },
  props: {
    fileType: {
      type: String,
      default: () => {
        return 'noop'
      }
    },
    accept: {
      type: String,
      default: () => {
        return '.xls,.xlsx'
      }
    },
    action: {
      type: String,
      default: () => {
        return '/admin/noop/batch'
      }
    }, // 文件上传地址
    limits: {
      type: Number,
      default: 1
    }  // 上传数量限制
  },
  emits:['getData'],
  setup(props: any, context: any) {
    const refUpload = ref()

    const state = reactive({
			isShowDialog: false,
      uploadBtnLoading: false,
		})

    const showDialog = () =>{ // 显示窗口函数
      state.isShowDialog = true
    }

    const downloadDemo = () =>{ // 下载模板
      window.open(props.fileType)
    }

    const handleExceed = () =>{ // 超过限制
      ElMessage.error('只能上传 ' + props.limits + ' 个文件！');
    }
    const beforeUpload = (file: any) =>{ // 上传之前
      var fileEnd = file.name.substring(file.name.lastIndexOf('.'))
      const arr = props.accept.split(',')

      if (!arr.includes(fileEnd)) {
        ElMessage.error('上传文件只能是' + arr.join('、') + '格式!');
        state.uploadBtnLoading = false
        return false
      }
      const isLt2M = file.size / 1024 / 1024 <= 100
      if (!isLt2M) {
        ElMessage.error('上传文件大小不能超过 ' + 100 + 'MB!');
        state.uploadBtnLoading = false
        return false
      }
    }
    const handleSuccess = (response: any) =>{ // 上传成功
    // const handleSuccess = (response: any, file: any, fileList: any) =>{ // 上传成功
      if (response.code == 200) {
        ElMessage.success(response.msg);
      }else{
        ElMessage.error(response.msg);
      }
      state.uploadBtnLoading = false
      refUpload.value.clearFiles() // 清空上传框
      context.emit('getData')
      // this.$emit('importInfo', '')
      // 关闭对话框
      state.isShowDialog = false
    }
    const handleError = (response: any) =>{ // 上传失败
    // const handleError= (response, file, fileList) =>{
      ElMessage.error(response.msg);
      refUpload.value.clearFiles() // 清空上传框
      state.uploadBtnLoading = false
    }
    const uploadFile = () =>{ // 上传按钮点击后，触发事件
      if(refUpload.value.uploadFiles.length !== 0){
        state.uploadBtnLoading = true
        refUpload.value.submit()
      }else{
        ElMessage.warning('请选择文件进行上传')
      }
    }

    return {
      ...toRefs(state),
      refUpload,
      showDialog,
      uploadFile,
      downloadDemo,
      handleExceed,
      beforeUpload,
      handleSuccess,
      handleError,
    };
  },
});
</script>
<style scoped>
.upload-demo{
  text-align: center;
}
.el-icon-upload{
  width: 50%;
  height: 70%;
}
.icon-upload{
  width: 90%;
  height: 90%;
  color: rgb(192, 196, 204);
  padding-top: 5%;
}
</style>